﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>ASP.NET SignalR + Layim 聊天室（.NET版）</title>
    <link href="~/layui3.0/css/layui.css" rel="stylesheet" />
    <link href="~/css/menu.css" rel="stylesheet" />
    <script src="~/layui3.0/layui.js"></script>
    <style>
        html {
            background-color: #D9D9D9;
        }
    </style>
</head>
<body>

    <script src="~/Scripts/login.js"></script>
    <script>
        var global = {
            hub: null,
            layim: null,
            other: null,
            ready: false,
            content: function () { }
        };
        var currentUser = {
            userid:  localStorage.getItem('currentUserId')
        };
        console.log(currentUser);
       
    </script>
<script>
    if (typeof layui === "object") {
        var kefu = '@Request.QueryString["t"]' == 'kefu';
        //自定义模块
        layui.extend({
            signalr: '/scripts/signalr/signalr',
            autohub: '/scripts/signalr/autohub',//自动生成的
            hub: '/Scripts/signalr/hub',
            menu:'/scripts/menu'
        });
        //如果前边几个都不引用的话，IE浏览器就没法接受消息，只能发消息，都引用上才可以
        layui.use(['jquery', 'signalr', 'autohub', 'hub'], function (j, s, a, hub) {
            global.hub = hub;
            hub.init({
                serverUrl: 'http://localhost:8496/layim'
            });
            //监听连接服务器成功
            hub.on('ready', function (data) {
                global.ready = true;
                console.log('signalr server is running...');
            });
            //监听连接服务器失败
            hub.on('failed', function (data) {
                console.log('signalr server.s connection is unuseful');
            });
            //监听收到消息
            hub.on('receiveMsg', function (result) {
                console.log("接收到消息");
                console.log(result);
                switch (result.msgtype) {
                    case chatType.ClientToClient:
                    case chatType.ClientToGroup:
                        //这里做判断，是因为消息也会推送给自己，当然后台可以选择不推给自己，因为后台按照组的形式，所以，退给自己的一个好处就是能够知道消息确实发出去了，否则，只是客户端感觉消息出去了。
                        if (currentUser.userid != result.msg.fromid) {
                            result.msg.type = result.msg.type == 'kefu' ? 'friend' : result.msg.type;
                            global.layim.getMessage(result.msg);//因为result.msg 是合乎layim接口规范，所以直接带入
                            console.log('添加消息');
                        }
                        break;
                    case chatType.GroupCreatedToClient:
                        console.log('用户创建群成功：群信息：' + JSON.stringify(result.msg));
                        //用户成功创建群之后的回调
                        global.layim.addList(result.msg);
                        break;
                    case chatType.ApplyHandledToClient:
                        console.log("收到申请被处理的消息");
                        //开始闪烁右下角消息图标
                        global.other.startTips(result.msg.msg);
                        if (result.msg.friend) {
                            result.msg.friend.remark = result.msg.friend.sign;
                            //调用layim接口，将好友直接添加到相应的好友组里面
                            global.layim.addList(result.msg.friend);
                        }
                        if (result.msg.group) {
                            //调用layim接口，将群组直接添加到相应的好友组里面
                            global.layim.addList(result.msg.group);
                        }
                        break;

                    case chatType.ApplySendedToClient:
                        console.log("收到申请消息");
                        global.other.startTips();
                        break;
                    case chatType.UserIsOnLineToClient:
                        console.log('收到用户是否在线的消息');
                        if (result.other.online === false) {
                            global.layim.sysmsg(result.msg);
                        }
                        break;
                    case chatType.UserOnOffLineToClient:
                        //注意，当用户刷新页面的时候，消息会收到两条，一条下线一条上线
                        console.log('收到用户上线或者下线消息');
                       // global.other.resetUserAvatar(result.msg);
                        break;
                    case chatType.UserJoinGroupToClient:
                        console.log('收到用户加群消息');
                        global.layim.getMessage({
                            username: "系统消息"
                       , avatar: ""
                       , id: result.other.groupid
                       , type: "group"
                       , system: true
                       , content: result.msg
                        });
                        break;
                }
            });



            //枚举和后台对应
            var chatType = {
                System: 0,
                ClientToClient: 1,
                ClientToGroup: 2,
                GroupToClient: 3,
                //群创建成功
                GroupCreatedToClient: 4,
                //消息处理完毕
                ApplyHandledToClient: 5,
                //申请发送
                ApplySendedToClient: 6,
                //用户是否在线的消息
                UserIsOnLineToClient: 8,
                //用户加群消息
                UserJoinGroupToClient: 9,
                //用户上线通知
                UserOnOffLineToClient: 7
            };
        });

        layui.use(['layim', 'menu'], function (l, m) {
            var menu = m;
            var layim = l;
            var $ = layui.jquery;
            var autoReplay = ['您好，我现在有事不在，一会再和您联系。', '你没发错吧？face[微笑] ', '洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ', '你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ', 'face[威武] face[威武] face[威武] face[威武] ', '<（￣︶￣）>', '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。', 'face[黑线]  你慢慢说，别急……', '(*^__^*) face[嘻嘻] ，是贤心吗？'];
            //基础配置
            layim.config({
                //初始化接口
                init: {
                    url: '/layimapi/base'
                }

                ////简约模式（不显示主面板）
                , brief: false
                //查看群员接口
                ,
                members: {
                    url: '/layimapi/member',
                    data: {}//自定义，默认为id
                }

                ,
                uploadImage: {
                    url: '/layimapi/upload_img'
                    ,
                    type: '' //默认post
                },
                uploadSkin: {
                    url: '/layimapi/upload_img?uid=' + currentUser.userid,
                    type: '' //默认post
                }
                ,
                uploadFile: {
                    url: '/layimapi/upload_file'
                    ,
                    type: '' //默认post
                }
                //扩展工具栏
              , tool: [{
                  alias: 'code'
                , title: '代码'
                , icon: '&#xe64e;'
              }]

                //,brief: true //是否简约模式（若开启则不显示主面板）

                //,title: 'WebIM' //自定义主面板最小化时的标题
                ,right: '100px' //主面板相对浏览器右侧距离
                //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
              , initSkin: '3.jpg' //1-5 设置初始背景
                //,skin: ['aaa.jpg'] //新增皮肤
                //,isfriend: false //是否开启好友
                //,isgroup: false //是否开启群组
                //,min: true //是否始终最小化主面板，默认false
                //,notice: true //是否开启桌面消息提醒，默认false
                //,voice: false //声音提醒，默认开启，声音文件为：default.wav

              , msgbox: '/home/msgbox', //消息盒子页面地址，若不开启，剔除该项即可
                chatLog: '/home/chathistory' //聊天记录地址
                ,
                find: '/home/find'
            });
            if (kefu) {
                layim.chat({
                    name: '在线客服-小苍'
                    , type: 'kefu'
                    , avatar: '/headphotos/default.jpg'
                    , id: 10006
                });
            }
            layim.on('online', function (data) {
                console.log(data);
            });
            //layim建立就绪
            layim.on('ready', function (res) {
                console.log('layim ready');
                global.layim = layim;
                //tmpl方法
                global.content = layim.content;
                //获取我的申请
                other.getMyApply();

                //初始化菜单
                menu.init({
                    menu: [
                        {
                            id:1,
                            ele: 'li[data-type="friend"]',
                            items: [
                                { text: '即时聊天', name: 'chat', icon: '&#xe611;', group: 'g1' },
                                { text: '历史记录', name: 'history', icon: '&#xe606;', group: 'g1' },
                                { text: '删除好友', name: 'delete', icon: '&#x1007;', group: 'g3' },
                                {
                                    text: '移动至', group: 'g2', child: [
                                        { text: '我的好友', name: 'myfriend', icon: '&#xe613;' },
                                        { text: '大学同学', name: 'collage', icon: '&#xe613;' },
                                        { text: '公司同事', name: 'worker', icon: '&#xe613;' }
                                    ]
                                },
                            ]
                        },
                            {
                                id:2,
                                ele: 'li[data-type="group"]',
                                items: [
                                    { text: '即时聊天', name: 'chat',  group: 'g1' },
                                    { text: '历史记录', name: 'history',  group: 'g1' },
                                    { text: '屏蔽消息', name: 'delete', group: 'g1' },
                                    { text: '解散群', name: 'delete',  group: 'g1' },
                                    { text: '转移群', name: 'delete',group: 'g1' },
                                ]
                            },
                              {
                                  id:3,
                                  ele: 'h5',
                                  items: [
                                      { text: '删除分组', name: 'chat',  group: 'g1' },
                                      { text: '刷新好友', name: 'history',  group: 'g1' },
                                      { text: '修改名称', name: 'delete',  group: 'g1' }
                                  ]
                              }
                    ],
                    power: {
                        manager:["delete","quit"]
                    }
                });
            });
            //监听菜单出来
            menu.on('beforeshow', function (othis) {
                console.log(othis);
                //增加权限判断逻辑
                menu.set('manager', true);
            });
            //监听事件
            menu.on('menuclick', function (othis, name) {
                console.log(othis);
                console.log(name);
            })
            //监听查看群员
            layim.on('members', function (data) {
                console.log(data);
            });
            /*
                监听聊天窗口切换
                增加连接业务,调用当前用户连接signalr服务器方法
            */
            layim.on('chatChange', function (data) {
                console.log(data);
                var t = data.data.type;//friend or group
                var from = currentUser.userid;
                var to = data.data.id;
                //调用hub连接方法,
                if (global.hub) {
                    var interval = setInterval(function () {
                        console.log(global.ready);
                        if (global.ready === true) {
                            global.hub.server.ctoc(currentUser.userid, data.data.id, t);
                            clearInterval(interval);
                        }
                    }, 500);

                } else {
                    alert('聊天室初始化失败，请刷新页面重试');
                }
            });
            /*
               监听发送消息
               对接signalr发送消息方法
           */
            layim.on('sendMessage', function (data) {
                other.send(data);
            });
            //监听签名修改
            layim.on('sign', function (value) {
                layer.msg(value);
            });
            /*
            监听打开我的消息列表窗口
            */
            layim.on('applyOpen', function () {
                console.log('监听到applyOpen事件');
                other.stopTips();
            });
            //其他业务逻辑（为了最大化的减少对layim.js的影响）
            var other = {
                api: {
                    getmyapply: '/layimapi/myapply'
                },
                getMyApply: function () {
                    var url = this.api.getmyapply;
                    $.get(url, { userid: currentUser.userid }, function (result) {
                        if (result.code == 0) {
                            var j = result.data.msgcount;
                            if (j > 0) {
                                layim.msgbox(j);
                            }
                        }
                    });
                },
                //发送消息
                send: function (msg) {
                    if (global.hub) {
                        global.hub.server.send(msg);
                    } else {
                        alert('聊天室初始化失败，请刷新页面重试');
                    }
                },
                //获取用户所在的群
                getUserGroups: function () {
                    var groups = [];
                    $('.layim-list-group li').each(function (i, item) {
                        if ($(this).hasClass('layim-null')) {
                            return groups;
                        }
                        var id = $(this).attr('id').replace('layim-group', '');
                        groups.push(id);
                    });
                    return groups;
                },
                startTips: function () {
                    layim.msgbox(1);
                },
                //重新设置用户头像，黑白或者亮
                resetUserAvatar: function (obj) {
                    var avatar = obj.avatar, online = obj.online, userid = obj.userid;
                    var imgObj = $('#layim-friend' + userid).find('img');
                    if (imgObj.length) {
                        if (obj.online) {
                            //如果上线了，将头像换成原来的头像，即非黑白头像
                            imgObj.attr('src', avatar);
                        } else {
                            //将头像置黑
                            grayscale(imgObj);
                        }
                    }

                }
            };
            global.other = other;
       
            //判断是否是群成员使用
            window.getUserGroups = other.getUserGroups;
        });
    } else {
        document.write("<a href='http://layim.layui.com/'>去layim官网</a>")
    }
  
</script>
    <div style="text-align:center;margin-top:200px;">
        <ul>
            <li>2016-12-15日更新</li>
            <li>对接3.0版本</li>
            <li>增加消息盒子页面，并对接消息盒子功能</li>
            <li>去掉以前的自定义签名和消息提示等功能（Layim3.0已经包含该功能）</li>
            <li>去掉以前自定义头像置灰功能（Layim3.0包含该功能）</li>
            <li>GitHub地址：<a style="color:blue" target="_blank" href="https://github.com/fanpan26/LayIM_NetClient">https://github.com/fanpan26/LayIM_NetClient</a> </li>
        </ul>
    </div>
</body>
</html>
